<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>奖品兑换</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="iconfont/iconfont-yc.css" rel="stylesheet" />
		<link href="css/posapp-yc.css" rel="stylesheet" />
		<link href="css/waitMe.min.css" rel="stylesheet" />
	</head>
	<style>
		.mui-icon-bars:before {
		    content: '\e466';
		    color: #fff;
		}
		.mui-table-view:before {
			display: none;
		}
		.mui-table-view-cell:after	{
			left: 0;
		}
		.mui-input-row label{
			width: 55%;
			padding-left: 25px;
			font-weight: bold;
		}
		.mui-input-row label~input{
			width: 45%;
		}
		
		.mui-btn-block{
			margin-bottom: 0;
		}
		
		* { touch-action: none; }
	</style>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>返回
			</button>
			<h1 class="mui-title">奖品兑换</h1>
		</header>
		<div class="mui-content" id="mui-content">
			<div id="prizeInfo" class="orders-list">
				<ul class="mui-table-view">
					 <li class="mui-table-view-cell"><a href="#" class="mui-icon iconfont icon-dingdan mui-dingdan"></a>奖品名称：<span v-html="prize.item.name"></span></li>
			         <li class="mui-table-view-cell"><a href="#" class="mui-icon iconfont icon-shouyintai "></a>奖品数量：<span v-html="prize.item.drawNum"></span></li>
			         <li class="mui-table-view-cell"><a href="#" class="mui-icon iconfont icon-riqi "></a>获奖时间：<span v-html="prize.createDateF"></span></li>
			         <li class="mui-table-view-cell" id="cardNoLi"><a href="#" class="mui-icon iconfont icon-kuajingzhifuiconfukuan "></a>有效期限:<span v-html="prize.startDateF + '-' + prize.endDateF"></span></li>
			         <li class="mui-table-view-cell" id="cardNoLi"><a href="#" class="mui-icon iconfont icon-kuajingzhifuiconfukuan "></a>奖品说明:<span v-html="prize.item.remark"></span></li>
			         <li class="mui-table-view-cell" id="cardNoLi"><a href="#" class="mui-icon iconfont icon-kuajingzhifuiconfukuan "></a>兑换人:<span v-html="prize.realName"></span></li>
			         <li class="mui-table-view-cell" id="cardNoLi"><a href="#" class="mui-icon iconfont icon-kuajingzhifuiconfukuan "></a>联系电话:<span v-html="prize.phone"></span></li>
				</ul>				
			</div>
			<div style="margin-bottom:15px;"></div>
			
			<div class="mui-content-padded oauth-area" style="display:flex;">
                <a class="mui-btn mui-btn-block cancel" style=" margin-right:10px" id="cancel">
                    <span>取消兑换</span>
                </a>
				<a class="mui-btn mui-btn-block mui-btn-blue confrim" id="confrim">
                    <span>确认兑换</span>
                </a>
            </div>	
            <div style="margin-bottom:15px;"></div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/waitMe.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/common.js"></script>
	<script src="js/menuFlat/menuFlat.min.js"></script>
	<script src="js/setting.js"></script>
	<script>
		var h = mui(document).common();

		var recordId = h.getQueryString("recordId");
		var code = h.getQueryString("code");

		//微信扫一扫直接进入该页面->先登陆再直接到该页面
		// var token = h.getQueryString("token");

		// if(token != null && token.length != 0){
		// 	sessionStorage.setItem("token", token);
		// }
		var vm = new Vue({
			el:"#prizeInfo",
			data : {
				prize : {
					item: {}
				}
			},
			mounted: function(){
				var self = this;

				h.startMask();

				mui.ajax(setting.serverUrl + "/interfaces/prize/view", {
					dataType: 'json', //服务器返回json格式数据 
					type: 'get', //HTTP请求类型 
					data:{
						token: sessionStorage.getItem("token"),
						recordId: recordId
					},
					success: function(response) {
						h.endMask();

						if(response.result){
							self.prize = response.data;
						}else{
							mui.toast(data.message);
						}
					}
				});
			}
		});

		mui(".oauth-area").on('tap', '.cancel', function(e) {
			history.back();
		});
		
		mui(".oauth-area").on('tap', '.confrim', function(e) {
			h.startMask();

			 mui.ajax(setting.serverUrl + "/interfaces/prize/exchange", {
					dataType: 'json', //服务器返回json格式数据 
					type: 'post', //HTTP请求类型 ,
					data:{					
						token: sessionStorage.getItem("token"),
						recordId: recordId,
						code:code
					},
					success: function(response) {
						h.endMask();

						if(response.result){
							mui.toast('兑换成功');

							setTimeout(function() {
								var htype = {
									url: 'exchange-list.html'
								}

								h.forward_wechat(htype);
							}, "500"); 
						}
						else{
							mui.toast("<h3>" + response.message + "</h3>");
						}
						
					},
					error: function() {
						h.endMask();
						
						mui.toast('您的网络出现异常,请稍后再试');
					}
				});
		 });		 
	</script>
</html>
